﻿在JavaScript中，可以使用HTML5的Drag and Drop API来创建div元素的拖放功能。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Div Drag and Drop</title>
    <style>
        .draggable {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 20px;
            left: 20px;
            cursor: move;
        }

        #dropzone {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            padding: 10px;
            margin-top: 40px;
        }

        ul.tabs {
            width: 100%;
            display: table;
            white-space: nowrap;
        }

            ul.tabs li {
                float: left;
                white-space: nowrap;
                display: inline-block;
                font-weight: bold;
                padding: 4px 8px;
                text-align: center;
                font-size: 12px;
                margin-right: 4px;
                border: 1px;
            }

                ul.tabs li.ltab {
                    white-space: nowrap;
                }
    </style>
</head>
<body>
    <div id="dropzone" ondrop="handleDrop(event)" ondragover="allowDrop(event)"></div>

    <ul class="tabs">
        <li><a href='#'>Tab 1</a></li>
        <li><a href='#'>Tab 2</a></li>
        <li class="ltab">&nbsp;</li>
    </ul>

    <script>
        function allowDrop(event) {
            event.preventDefault(); //阻止默认行为
        }

        function handleDrop(event) {
            var data = event.dataTransfer.getData("text"); //获取被拖动元素的数据

            var draggedElement = document.getElementById(data); //根据id获取被拖动的元素

            var dropZone = event.target; //获取目标区域（dropzone）

            dropZone.appendChild(draggedElement); //将被拖动的元素添加到目标区域内
        }

        var draggableElements = document.getElementsByClassName('draggable'); //获取所有可拖动的元素

        for (var i = 0; i < draggableElements.length; i++) {
            draggableElements[i].addEventListener('dragstart', function (event) {
                event.dataTransfer.setData("text", this.id); //设置要传输的数据类型及值
            });
        }
    </script>
</body>
</html>

